<template>
	<view>
		<page-head :pageTitle="pageTitle"></page-head>
		<view class="container">
			<view class="myhead">
				<view class="userinfo">
					<view class="user_box box box-align-center" v-if="vip_info">
						<view class="userinfo_l">
							<image class="headimg" mode="aspectFill" :src="vip_info.headimgurl"></image>
						</view>
						<view class="userinfo_desc">
							<view class="userinfo_top">{{vip_info.vip_name}}</view>
							<view class="userinfo_bottom">个人账号</view>
						</view>
					</view>
					<button class="kfbt user_box box box-align-center" v-else open-type='getUserInfo' @getuserinfo="auth_getuserinfo">
						<view class="userinfo_l">
							<image mode="aspectFill" :src="STATIC_URL+'wap/default/cssimg/userpic.png'"></image>
						</view>
						<view class="userinfo_desc">
							<view class="userinfo_empower">请授权个人信息 ＞</view>
						</view>
					</button>
				</view>
			</view>
			<view class="header">
				<view class="info box">
					<view class="ul box">
						<navigator url="/pages/vbeans/exchange" class="li" data-name="品牌积分" @tap="handlemine">
							<view class="num">{{user_assets.point}}</view>
							<view class="txt">积分</view>
						</navigator>
						<navigator url="/pages/member/mycoupon" data-name="我的券" class="li" @tap="handlemine">
							<view class="num">{{user_assets.coupon}}</view>
							<view class="txt">我的券</view>
						</navigator>
						<navigator url="/pages/vbeans/vRecord" data-name="我的Ｖ豆" class="li" @tap="handlemine">
							<view class="num">{{user_assets.v_point}}</view>
							<view class="txt">Ｖ豆</view>
						</navigator>

					</view>
				</view>
			</view>

			<view class="list">
				<block v-for="(item, index) of navlist" :key="index">
					<!-- data-url="{{item.url}}" data-name="{{item.name}}" -->
					<view class="item box box-align-center" v-if="item.type=='navigator'" @tap="handleNavigator">
						<view class="wrap_hd">
							<image :src="item.imgurl"></image>
						</view>
						<view class="wrap_bd flex">{{item.name}}</view>
						<view class="wrap_ft"></view>
						<view class="navigator-arrow"></view>
					</view>
					<view class="item box box-align-center" v-else-if="item.type=='contact'">
						<button class="kfbt box box-align-center" open-type='contact'>
							<view class="wrap_hd">
								<image :src="item.imgurl"></image>
							</view>
							<view class="wrap_bd flex">{{item.name}}</view>
							<view class="wrap_ft"></view>
						</button>
					</view>
				</block>
			</view>

			<page-bottom :page_path="page_path"></page-bottom>
		</view>
	</view>
</template>

<script>
	let app = getApp()
	import getinfo from "../common/getinfo"
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				pageTitle: '个人中心',
				page_path: '/pages/mine',
				STATIC_URL: app.globalData.STATIC_URL,
				vip_info: '',
				user_auth: false,
				// 用户资产
				user_assets: {},
				navlist: [{
					name: '品牌积分',
					url: '/pages/vbeans/exchange',
					type: 'navigator',
					imgurl: '/static/images/mine01.png'
				}, {
					name: '我的券',
					url: '/pages/main',
					type: 'navigator',
					imgurl: '/static/images/mine02.png'
				}, {
					name: '我的Ｖ豆',
					url: '/pages/vbeans/vRecord',
					type: 'navigator',
					imgurl: '/static/images/mine03.png'
				}, {
					name: '联系客服',
					type: 'contact',
					imgurl: '/static/images/mine04.png'
				}, {
					name: '关于Ｖ券',
					url: '/pages/vbeans/about',
					type: 'navigator',
					imgurl: '/static/images/mine05.png'
				}],
			}
		},
		onLoad(options) {
			this._options = options
		},
		onShow() {
			this.user_auth = uni.getStorageSync('user_auth');
			this.vip_info = uni.getStorageSync('vip_info');
			this.user_assets = this.userinfo.user_assets
		},
		computed: {
			...mapState({
				userinfo: state => state.info.userinfo
			})
		},
		methods: {
			auth_getuserinfo(e) {
				if (!this.user_auth && !this.vip_info) {
					uni.showLoading({
						title: '授权中...',
					})
					getinfo.getWxInfo().then(res => {
						if (e.detail['errMsg'] == 'getUserInfo:ok' || e.detail.userInfo) {
							uni.setStorageSync('userinfo', e.detail);
							getinfo.decryptUserInfo(e.detail).then(res => {
								uni.hideLoading();
								this.vip_info = res,
								this.loading = false
							})
						}
					})
				}
			},
			handlemine(){
				
			}
		},
	}
</script>

<style lang="scss">
	.container {
		background: #f1f1f1;
		padding-bottom: 0;
		overflow: hidden;
	}

	.bottomHL {
		background: #fff;
	}

	.navigator-arrow {
		padding-right: 26rpx;
		position: relative;
	}

	.navigator-arrow:after {
		content: " ";
		display: inline-block;
		height: 18rpx;
		width: 18rpx;
		border-width: 2rpx 2rpx 0 0;
		border-color: #7b6e6e;
		border-style: solid;
		transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		position: absolute;
		top: 50%;
		margin-top: -8rpx;
		right: 20rpx;
	}

	.myhead {
		width: 100%;
		height: 304rpx;
	}

	.userinfo {
		padding: 0px 32rpx;
		color: #fff;
		height: 304rpx;
		background: url(https://wq.senwellzy.cn/Public/Images/vquan/Oval20Copy@3x.png) no-repeat;
		background-size: 100% 100%;
	}

	.user_box {
		padding-top: 50rpx;
	}

	.userinfo .userinfo_l {
		width: 120rpx;
		height: 120rpx;
	}

	.userinfo .userinfo_l image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}

	.userinfo .userinfo_l image.headimg {
		border: 6rpx solid rgba(255, 255, 255, .5);
	}

	.userinfo .userinfo_desc {
		flex: 1;
		margin-left: 32rpx;
	}

	.userinfo .userinfo_desc .userinfo_top {
		font-size: 36rpx;
		font-weight: 600;
	}

	.userinfo_empower {
		font-size: 32rpx;
		color: #ffffff;
	}

	.userinfo .userinfo_desc .userinfo_bottom {
		display: inline-block;
		font-size: 18rpx;
		line-height: 26rpx;
		padding: 4rpx 22rpx;
		background: #ffda00;
		border-radius: 17rpx;
		color: #be5600;
	}

	.userinfo_status,
	.barcode {
		flex: 1;
		text-align: left;
	}

	.userinfo .userinfo_r {
		width: 180rpx;
		text-align: center;
	}

	.userinfo .userinfo_r .num {
		color: #fff;
		font-size: 56rpx;
	}

	.userinfo .userinfo_r .desc {
		font-size: 28rpx;
		line-height: 1;
		margin-top: 10rpx;
	}

	.userinfo-avatar {
		width: 128rpx;
		height: 128rpx;
		margin: 20rpx;
		border-radius: 50%;
	}

	.userinfo-nickname {
		color: #fff;
	}

	.header {
		margin-top: -90rpx;
		/* padding: 0 20rpx; */
	}

	.header .info {
		padding: 28rpx 0rpx;
		background: #fff;
		align-items: center;
	}

	.header .info .info_img image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 0 auto;
		display: block;
		text-align: center;
	}

	.header .info .info_img .ws {
		font-size: 24rpx;
		color: #808080;
		text-align: center;
		text-decoration: underline;
	}

	.header .info .ul {
		flex: 1;
	}

	.header .info .ul .li {
		width: 33.3%;
		text-align: center;
	}

	.header .info .ul .li .num {
		line-height: 52rpx;
		color: #666;
		font-size: 32rpx;
		font-weight: bold;
	}

	.header .info .ul .li .txt {
		line-height: 36rpx;
		font-size: 26rpx;
		color: #8d8d8d;
		margin-top: 16rpx;
		font-weight: bold;
	}

	.list {
		padding: 0 20rpx;
		margin-top: 20rpx;
		background: #fff;
	}

	.list .item {
		padding: 26rpx 0;
		line-height: 1.6;
		position: relative;
	}

	.list .item:after {
		content: '';
		position: absolute;
		left: 76rpx;
		top: 0;
		width: 100%;
		height: 1rpx;
		background: #ededed;
	}

	.list .item:nth-child(1)::after {
		background: rgba(0, 0, 0, 0);
	}

	.list .item .wrap_hd {
		width: 56rpx;
		height: 56rpx;
	}

	.list .item .wrap_hd image {
		width: 56rpx;
		height: 56rpx;
	}

	.list .item button {
		width: 100%;
		height: 100%;
	}

	.list .item .wrap_bd {
		font-size: 28rpx;
		color: #785e5e;
		margin-left: 20rpx;
	}

	.list .item:nth-child(2) .wrap_bd {
		letter-spacing: 0.5em;
	}
</style>
